<script setup lang="ts" name="DictionaryAddEdit">
import { transformI18n } from '@/plugins/i18n'
import useDictionaryEntry from '@/hooks/useDictionaryEntry'
const { getDictionaryEntryData } = useDictionaryEntry()
const statusList = ref([])
const props = defineProps({
  listData: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formData:any = ref({
  pid: '',
  label: '',
  valueType: 'text',
  value: '',
  tagColor: '',
  icon: '',
  status: true,
  sort: 0,
  remark: ''
})
const valueTypeList = ref([
  { label: '文本', value: 'text' },
  { label: '布尔', value: 'boolean' },
  { label: '数字', value: 'number' }
])
const tagColorList = ref([
  { label: 'primary', value: 'primary' },
  { label: 'info', value: 'info' },
  { label: 'success', value: 'success' },
  { label: 'warning', value: 'warning' },
  { label: 'danger', value: 'danger' }
])
// 显示新建/编辑模块表单抽屉弹窗
const showDictionaryEntryDialog = (v) => {
  console.log(props.listData)
  if (v) {
    dialogTitle.value = 'buttons.buttonEdit'
    formData.value.pid = v.pid
    formData.value.label = v.label
    formData.value.value = v.value
    formData.value.valueType = v.valueType
    formData.value.status = v.status
    formData.value.icon = v.icon
    formData.value.tagColor = v.tagColor
    formData.value.sort = v.sort
    formData.value.remark = v.remark
  } else {
    dialogTitle.value = 'buttons.buttonCreate'
    formData.value.pid = ''
    formData.value.label = ''
    formData.value.value = ''
    formData.value.valueType = 'text'
    formData.value.status = true
    formData.value.tagColor = ''
    formData.value.icon = ''
    formData.value.sort = 0
    formData.value.remark = ''
  }
  dialogVisible.value = true
}
// 子组件将方法暴露给父组件
defineExpose({ showDictionaryEntryDialog })
const handleCloseDialog = () => {
  dialogVisible.value = false
}

const handleOk = () => {
  console.log(formData.value)
}

const valueTypeChangeHandler = (v) => {
  switch (v) {
    case 'boolean':
      formData.value.value = false
      break
    case 'number':
      formData.value.value = 0
      break
    default:
      formData.value.value = ''
      break
  }
}

const pidChangeHandler = (v) => {
  console.log(v)
}

const getStatusList = async () => {
  statusList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'enable_boolean'
  })
}
getStatusList()
</script>

<template>
  <el-dialog v-model="dialogVisible" width="720px" append-to-body :title="transformI18n(dialogTitle, true)">
    <el-form label-width="auto" label-position="right">
      <div class="el-form-group">
        <el-form-item :label="$t('page.父级分类')">
          <el-cascader v-model="formData.pid" :options="listData" @change="pidChangeHandler" :placeholder="$t('placeholders.请选择') + $t('page.父级分类')" />
        </el-form-item>
        <el-form-item :label="$t('page.名称')">
          <el-input v-model="formData.label" :placeholder="$t('placeholders.请输入') + $t('page.名称')" />
        </el-form-item>
      </div>
      <div class="el-form-group mt-6px">
        <el-form-item :label="$t('page.数据类型')">
          <el-radio-group v-model="formData.valueType" @change="valueTypeChangeHandler">
            <el-radio-button v-for="(item, index) in valueTypeList" :key="index" :label="item.value">{{ item.label }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('page.数据值')">
          <el-input v-if="formData.valueType === 'text'" v-model="formData.value" :placeholder="$t('placeholders.请输入') + $t('page.数据值')" />
          <el-switch v-else-if="formData.valueType === 'boolean'" v-model="formData.value" :active-text="$t('page.是')" :inactive-text="$t('page.否')" />
          <el-input-number v-else v-model="formData.value" :min="1" />
        </el-form-item>
      </div>
      <div class="el-form-group mt-6px">
        <el-form-item :label="$t('page.标签颜色')">
          <el-select v-model="formData.tagColor" clearable :placeholder="$t('placeholders.请选择') + $t('page.标签颜色')">
            <el-option v-for="item in tagColorList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('page.图标')">
          <IconSelect v-model:icon="formData.icon"></IconSelect>
        </el-form-item>
      </div>
      <div class="el-form-group mt-6px mb-6px">
        <el-form-item :label="$t('page.状态')">
          <el-radio-group class="radio-button" v-model="formData.status">
            <el-radio v-for="(item, index) in statusList" :key="index" :label="item.value" border>{{ $t('page.' + item.label) }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('page.排序')">
          <el-input-number v-model="formData.sort" />
        </el-form-item>
      </div>
      <el-form-item :label="$t('page.备注')">
        <el-input type="textarea" v-model="formData.remark" :placeholder="$t('placeholders.请输入') + $t('page.备注')" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="modal-footer" ref="modalFooter">
        <el-button @click="handleCloseDialog">{{ $t('buttons.buttonCancel') }}</el-button>
        <el-button type="primary" @click="handleOk">{{ $t('buttons.buttonConfirm') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form {
  :deep(.el-form-item__content) {
    .el-radio-group {
      margin: 6px;

      &.radio-button {
        margin: 0;
      }
    }

    .icon-select {
      flex: 1;
      margin: 6px;
    }
  }

  :deep(.el-form-item__label) {
    margin: 6px;
  }

  .el-form-group {
    display: flex;
    flex: 1;

    .el-form-item {
      flex: 1;
      margin: 0;
    }

    .el-form-item+.el-form-item {
      margin: 0;
    }
  }
}

.modal-footer {
  display: inline-flex;
  overflow: hidden;
}
</style>
